<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/login.js"></script>
    <title>Login&Register</title>
</head>
<body>
<div class="login-bg">
    <div class="module form-module">
        <div class="toggle"><i style="margin-top: 9px;" class="fa fa-lg fa-times fa-pencil"></i></div>
        <div class="form">
            <h2>Login to your account</h2>
                <input type="text" id="loginName" name="loginName" placeholder="Username..."/>
                <input type="password" id="loginPwd" name="loginPwd" placeholder="Password..."/>
                <div class="alert alert-danger al" role="alert" id="loginErro"></div>
                <button id="loginSubmit">Login</button>
        </div>
        <div class="form">
            <h2>Create an account</h2>
            <%-- <form action="${pageContext.request.contextPath }/client/regist"> --%>
                <input type="text" name="cname" id="cname" placeholder="Username"/>
                <div class="alert alert-danger al" role="alert" id="cnameError"></div>  
                <input type="number" name="ctel" id="ctel" placeholder="Phone Number"/>
                <div class="alert alert-danger al" role="alert" id="ctelError"></div>  
                <input type="text" name="caddress" id="caddress" placeholder="Address"/>
                <div class="alert alert-danger al" role="alert" id="caddressError"></div>  
                <input type="password" name="cpassword" id="cpassword" placeholder="Password"/>
                <div class="alert alert-danger al" role="alert" id="passwordError"></div>  
                <input type="password" name="cpasswordpwd" id="cpasswordpwd"" placeholder="Password Confirm"/>
                <div class="alert alert-danger al" role="alert" id="cpasswordpwdError"></div>  
                <button type="button" id="registerSubmit">Register</button>
            <!-- </form> -->
        </div>
        <div style="display:none" class="cta"><a href="javascript:void(0)">Forgot your password?</a></div>
    </div>
</div>
</body>
<script>
    // Toggle Function: CSS style control
    

	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return unescape(r[2]);
		return null;
	}
	
	if(getQueryString('register')){
		$('.form').animate({
			height : "toggle",
			'padding-top' : 'toggle',
			'padding-bottom' : 'toggle',
			opacity : "toggle"
		}, "slow");
	}

	$('.toggle').click(function() {
		// Switches the Icon
		$(this).children('i').toggleClass('fa-pencil');
		// Switches the forms
		$('.form').animate({
			height : "toggle",
			'padding-top' : 'toggle',
			'padding-bottom' : 'toggle',
			opacity : "toggle"
		}, "slow");
	});

</script>
</html>